<template>
  <div class="question">
    <tab :line-width=2 active-color='#fc378c' v-model="active">
      <tab-item :selected="active === 0">未解决</tab-item>
      <tab-item :selected="active === 1">已解决</tab-item>
    </tab>
    <swiper class="slider-box" v-model="active" height="100%" :show-dots="false">
      <swiper-item>
        <ArtList ref="noList" :dataList="noResolve" @down-cb="noDownCb" @up-cb="noUpCb"/>
      </swiper-item>
      <swiper-item>
        <ArtList ref="hasList" :dataList="hasResolve" @down-cb="hasDownCb" @up-cb="hasUpCb"/>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
import ArtList from '@/components/art-list'

export default {
  name: "question",
  components: {
    ArtList
  },
  data() {
    return {
      active: 0,
      limit: 20,
      hasResolve: [],
      noResolve: [],
    }
  },
  watch: {
    active(newV) {
      if (newV === 1 && !this.hasResolve.length) {
        this.$refs['hasList'].initScroll()
      }
    }
  },
  methods: {
    async hasDownCb(mescroll) {
      try {
        const res = await this.getList(1, 10, 20)
        this.hasResolve = res.data
        mescroll.endSuccess()
      } catch (e) {
        mescroll.endErr()
      }
    },
    async hasUpCb({num, size}, mescroll) {
      // console.log(2)
      try {
        const res = await this.getList(num, size, 20)
        if (res.code === 1) {
          this.hasResolve = this.hasResolve.concat(res.data)
          mescroll.endBySize(this.hasResolve.length, res.count)
        }
      } catch (e) {
        mescroll.endErr();
      }
    },
    async noDownCb(mescroll) {
      try {
        const res = await this.getList(1, 10, 10)
        this.noResolve = res.data
        mescroll.endSuccess()
      } catch (e) {
        mescroll.endErr()
      }
    },
    async noUpCb({num, size}, mescroll) {
      // console.log(2)
      try {
        const res = await this.getList(num, size, 10)
        if (res.code === 1) {
          let list = res.data
          this.noResolve = this.noResolve.concat(list)
          mescroll.endBySize(list, res.count);
        }
      } catch (e) {
        mescroll.endErr()
      }
    },
    getList(page, limit, status) {
      return this.$get('/problemArea/list', {
        page,
        limit,
        type: 40,
        status
      })
    },
  },
  async mounted() {
    this.$refs['noList'].initScroll()
  }
}
</script>

<style lang="less">
.question {
  flex: 1;
  display: flex;
  flex-direction: column;

  .slider-box {
    flex: 1;
  }
}

</style>
